<template>
    <div class="news-category">
        <div class="title">
            <template v-for="(item, index) in titles" :key="item">
                <span :class="['category', activeIndex === index ? 'active-title' : '']">{{ item }}</span>
                <span class="division-line" v-if="titles!.length - 1 != index">|</span>
            </template>
        </div>
        <swiper-view
            class="swiper"
            ref="swiperCompRef"
            :is-auto-play="false"
            :is-loop="false"
            @slideChange="handlerSwiperSlide">
            <template v-for="item in titles" :key="item">
                <swiper-slide class="swiper-item">
                    <list :list-data="listData"></list>
                </swiper-slide>
            </template>
        </swiper-view>
    </div>
</template>

<script setup lang="ts">
    import type { News } from "@/model/briefing";
    import { useHomeStore } from "@/store/home";
    import { computed, ref } from "vue";
    import List from "@/components/global/List.vue";
    import SwiperView from "./global/SwiperView.vue";
    import { api_get_briefing, type Category } from "@/api/api_everyday";
    import { SwiperSlide } from "swiper/vue";

    const titles = ref<Category[]>();
    titles.value = ["时事", "国内", "国际", "商业"];

    const homeStore = useHomeStore();
    const listData = ref<News[]>([]);
    const getListdata = async () => {
        await homeStore.getBrigefingData("时事");
        listData.value = computed((): News[] => homeStore.briefingData.news).value;
        console.log("listData", listData.value);
    };
    getListdata();

    const activeIndex = ref(0);
    const handlerSwiperSlide = async (index: number) => {
        console.log(" ", index);
        activeIndex.value = index;
        if (titles.value) {
            const category = titles.value[index];
            console.log("category", category);
            await homeStore.getBrigefingData(category);
            listData.value = computed((): News[] => homeStore.briefingData.news).value;
            // if(listData.length === 0) alert(`暂无${category}简报`)
        }
    };
</script>

<style scoped>
    .news-category {
        width: 100%;
        max-width: 66.7rem;
        min-height: 100vh;
        margin: 0 auto;
        position: relative;
        padding: 1.33rem;
        color: white;
        z-index: 999;
    }

    .news-category::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: #0007;
        backdrop-filter: blur(var(--filter-blur));
        z-index: -1;
    }

    .title {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 2rem;
        padding: 1.33rem 0;
        vertical-align: middle;
    }

    .title .division-line {
        margin: 0 0.5rem;
    }

    .category {
        font-weight: bold;
    }

    .active-title {
        color: #158bb8;
    }

    .swiper-item {
        min-height: calc(100vh - 2rem);
    }
</style>
